<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    template="/plantillas/plantilla-sistema.xhtml">  
    <ui:define name="cabecera">
        <title>Gestión de Departamentos</title>
        <link rel="shortcut icon"  href="../../resources/imagenes/favicon.ico" />
    </ui:define>
    <ui:define name="contenido">
        <center>
            <p:panel id="departamentoPnl" header="Departamentos" style="width: 950px">
                <h:form id="tablaDepartamentoFrm">
                    <p:dataTable id="tablaDepartamento" var="departamento" resizableColumns="true"
                                 value="#{departamentoBean.listaDepartamentos}"
                                 rowKey="#{departamento.codigodepartamento}" selectionMode="single"
                                 paginator="true" paginatorPosition="bottom" rows="15"
                                 emptyMessage="No hay registros disponibles.">
                        <p:column headerText="Departamento" filterBy="#{departamento.nombre}" 
                                  sortBy="#{departamento.nombre}" filterMatchMode="contains">
                            <h:outputText id="nombreTxt" value="#{departamento.nombre}" />
                        </p:column>
                        <p:column headerText="Zona" filterBy="#{departamento.zona}" 
                                  sortBy="#{departamento.zona}" filterMatchMode="contains">
                            <h:outputText id="zonaTxt" value="#{departamento.zona}"/>
                        </p:column>                     
                        <p:column headerText="Modificar">
                            <center>
                            <p:commandButton id="modificarBtn" title="Modificar" icon="ui-icon-pencil"
                                             actionListener="#{departamentoBean.prepararModificacion(departamento)}" 
                                             update=":modificarDepartamentoFrm:modificarDepartamentoPnl" 
                                             oncomplete="modificarDepartamentoWgt.show()" />
                            </center>                   
                        </p:column>
                        <p:column headerText="Eliminar">
                            <center>
                                <p:commandButton id="eliminarBtn" title="Eliminar" icon="ui-icon-trash" 
                                                actionListener="#{departamentoBean.prepararEliminacion(departamento)}"
                                                update=":eliminarDepartamentoFrm:eliminarDepartamentoPnl"
                                                oncomplete="eliminarDepartamentoWgt.show()" />
                            </center> 
                        </p:column>
                    </p:dataTable>                    
                    <p:commandButton id="nuevoBtn" value="Nuevo Departamento" 
                                    actionListener="#{departamentoBean.prepararAdicion}" 
                                    update=":guardarDepartamentoFrm:guardarDepartamentoPnl" 
                                    oncomplete="guardarDepartamentoWgt.show()"
                                    title="Agregar nuevo departamento" icon="ui-icon-document"/>              
                </h:form>
            </p:panel>
        </center>
    </ui:define>      
    <ui:define name="extra">
        <p:dialog id="guardarDepartamentoDlg" header="Nuevo Departamento" widgetVar="guardarDepartamentoWgt" 
                  resizable="false" modal="true" showEffect="false">
            <h:form id="guardarDepartamentoFrm">
                <h:panelGrid id="guardarDepartamentoPnl" columns="2" style="margin-bottom:10px">
                    <h:outputLabel for="nombreTxt" value="Nombre del Departamento:" />
                    <h:inputText id="nombreTxt" value="#{departamentoBean.departamento.nombre}"/>                  
                    <h:outputLabel for="zonaTxt" value="Zona Geográfica:" />
                    <h:inputText id="zonaTxt" value="#{departamentoBean.departamento.zona}"/>
                    <p:commandButton value="Guardar" id="guardarBtn"
                                 update=":tablaDepartamentoFrm:tablaDepartamento" 
                                 oncomplete="guardarDepartamentoWgt.hide()" 
                                 actionListener="#{departamentoBean.agregarDepartamento}" 
                                 icon="ui-icon-disk" title="Guardar"/>
                    <p:commandButton value="Cancelar" type="button" onclick="guardarDepartamentoWgt.hide()"
                                     icon="ui-icon-cancel" title="Cancelar"/>
                </h:panelGrid> 
            </h:form>
        </p:dialog>
        
        <p:dialog id="modificarDepartamentoDlg" header="Modificar Departamento" widgetVar="modificarDepartamentoWgt" 
                  resizable="false" modal="true" showEffect="false">
            <h:form id="modificarDepartamentoFrm">
                <h:panelGrid id="modificarDepartamentoPnl" columns="2" style="margin-bottom:10px">
                    <h:outputLabel for="nombreTxt" value="Nombre del Departamento:" />
                    <h:inputText id="nombreTxt" value="#{departamentoBean.departamento.nombre}"/>                  
                    <h:outputLabel for="zonaTxt" value="Zona Geográfica:" />
                    <h:inputText id="zonaTxt" value="#{departamentoBean.departamento.zona}"/>
                    <p:commandButton value="Guardar" id="guardarBtn"
                                 update=":tablaDepartamentoFrm:tablaDepartamento" 
                                 oncomplete="modificarDepartamentoWgt.hide()" 
                                 actionListener="#{departamentoBean.actualizarDepartamento}" 
                                 icon="ui-icon-disk" title="Guardar"/>
                    <p:commandButton value="Cancelar" type="button" onclick="modificarDepartamentoWgt.hide()"
                                     icon="ui-icon-cancel" title="Cancelar"/>
                </h:panelGrid> 
            </h:form>
        </p:dialog>
        
        <p:dialog id="eliminarDepartamentoDlg" header="Eliminar Departamento"  modal="true"
                  widgetVar="eliminarDepartamentoWgt" resizable="false" showEffect="false">
            <h:form id="eliminarDepartamentoFrm">
                <h:panelGrid id="eliminarDepartamentoPnl" style="margin-bottom:10px">
                    <p:row >
                        <p:column colspan="2">
                            <h:outputText value="¿Está seguro de eliminar este departamento?"/>
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column>
                            <p:commandButton id="confirmarBtn" value="Confirmar" icon="ui-icon-check"
                                            actionListener="#{departamentoBean.eliminarDepartamento}" 
                                            oncomplete=":eliminarDepartamentoWgt.hide()" 
                                            update=":tablaDepartamentoFrm:tablaDepartamento" 
                                            title="Confirmar"/>
                        </p:column>
                        <p:column>
                            <p:commandButton value="Cancelar" type="button" 
                                             onclick="eliminarDepartamentoWgt.hide()"
                                             icon="ui-icon-cancel" title="Cancelar">
                                <p:spacer width="20" height="30" />
                            </p:commandButton>
                        </p:column>
                    </p:row>
                </h:panelGrid>
            </h:form>
        </p:dialog>       
    </ui:define>   
</ui:composition>

